<template>
  <div id="AppBox">
    <div class="menu">
      <div class="title">
        <router-link to="/"> Spacial ToolBox</router-link>
      </div>

      <div class="menubox">
        <a-menu
          id="dddddd"
          style="width: 100%"
          mode="inline"
          :items="items"
          v-model:selectedKeys="state.selectedKeys"
          v-model:openKeys="state.openKeys"
          @click="handleClick"
        ></a-menu>
      </div>
    </div>

    <div class="content">
      <div class="content_header">首页 > 矢量数据入库</div>
      <div class="content_body">
        <router-view></router-view>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import type { ItemType } from 'ant-design-vue'
import { h, reactive, type VueElement } from 'vue'
import { MailOutlined, AppstoreOutlined, SettingOutlined } from '@ant-design/icons-vue'
import IconTooling from './components/icons/IconTooling.vue'
import IconDataHand from './components/icons/IconDataHand.vue'
import { useRouter } from 'vue-router'
function getItem(
  label: VueElement | string,
  key: string,
  icon?: any,
  children?: ItemType[],
  type?: 'group',
): ItemType {
  return {
    key,
    icon,
    children,
    label,
    title: label,
    type,
  } as ItemType
}

const router = useRouter()

const state = reactive({
  collapsed: false,
  selectedKeys: ['1'],
  openKeys: ['sub1', 'sub2'],
  preOpenKeys: ['sub1'],
})

const items = reactive([
  getItem('数据展示', 'sub1', () => h(MailOutlined), [
    getItem('Option 1', '1'),
    getItem('Option 2', '2'),
    // getItem('Item 2', 'g2', null, [getItem('Option 3', '3'), getItem('Option 4', '4')]),
  ]),

  getItem('空间数据处理', 'sub2', () => h(IconDataHand), [
    getItem('空间数据入库', '5'),
    getItem('发布Geoserver', '6'),
    // getItem('Submenu', 'sub3', null, [getItem('Option 7', '7'), getItem('Option 8', '8')]),
  ]),

  // { type: 'divider' },

  // getItem('Navigation Three', 'sub4', () => h(SettingOutlined), [
  //   getItem('Option 9', '9'),
  //   getItem('Option 10', '10'),
  //   getItem('Option 11', '11'),
  //   getItem('Option 12', '12'),
  // ]),
])

const handleClick = ({ item }: any) => {
  const { title } = item
  router.push({
    name: title,
  })
}
</script>

<style scoped lang="less">
#AppBox {
  display: grid;
  height: 100vh;
  grid-template-columns: 300px 1fr;
  overflow: hidden;

  .menu {
    background-color: #e9e9e9;
    height: 100vh;
    // flex-shrink: 1;
    // flex-basis: 300px;
    // height: 100%;
    .title {
      height: 60px;
      text-align: center;
      display: flex;
      align-items: center;
      justify-content: center;
      background-color: #fff;
      width: calc(100% - 16px);
      margin-left: 8px;
      margin-bottom: 8px;
      margin-top: 8px;
      border-radius: 8px;

      a {
        font-weight: 600;
        font-size: 24px;
        cursor: pointer;
        letter-spacing: 1px;
        word-spacing: 5px;
        color: #000000e0;
        text-decoration: none;
      }
    }
    .menubox {
      max-height: calc(100% - 76px);
      overflow: auto;
      width: 284px;
      margin-left: 8px;
      border-radius: 8px;
    }
    .menubox::-webkit-scrollbar {
      width: 0;
    }
  }

  .content {
    background-color: #e9e9e9;
    padding: 8px;
    padding-left: 0;
    height: 100%;
    .content_header {
      height: 60px;
      background-color: #fff;
      border-radius: 8px;
      margin-bottom: 8px;
      display: flex;
      align-items: center;
      padding: 0 16px;
    }
    .content_body {
      background-color: #fff;
      border-radius: 8px;
      height: calc(100% - 68px);
      overflow: auto;
    }
  }
}
</style>
